<template>
    <div class="jumbotron-home" :style="{ height: useStore.jumbotronHeight, transition: '0.2s' }">
        <div class="inner">
            <span style="font-weight: 700; font-size: 1.7rem" class="animate__animated animate__fadeInLeft"> {{
                useStore.router.meta?.title }} </span>
            <span style="font-size: 1rem" class="animate__animated animate__fadeInLeft"> {{
                useStore.router.meta?.desc }}</span>
        </div>
        <img class="bg1" src="@/assets/imgs/home-bg.jpg" alt="Decorative image frame" />
        <img class="bg2" src="@/assets/imgs/jumbotron-cloud.png" alt="" />
        <div class="jum-btm">
            <el-icon class="mouse" :size="30" @click="handDir">
                <Mouse />
            </el-icon>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { useCommpnStore } from "@/stores/common";

const useStore = useCommpnStore();

const handDir = (e: any, index: Number): void => {
    const targetPosition: any = document.querySelector(`.content-warp`);
    const targetPositionTop = targetPosition.getBoundingClientRect().top;
    window.scrollTo({
        top: targetPositionTop + window.scrollY,
        behavior: "smooth", // 可选，平滑滚动效果
    });
};
</script>

<style lang="scss" scoped>
.jumbotron-home {
    width: 100%;
    position: relative;
    overflow: hidden;
    transition: 0.5s;

    .inner {
        position: absolute;
        top: 25%;
        width: 100%;
        color: #34495e;
        z-index: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .options-warp {
        display: flex;
        margin-top: 10px;

        .options-item {
            margin-right: 10px;
        }
    }

    .bg1 {
        width: 100%;
        height: calc(100% - 100px);
        object-fit: cover;
        display: block;
        // bottom: 100px;
        // top: 0;
        animation: scaleDraw 15s infinite;
    }

    .bg2 {
        position: absolute;
        left: 0;
        bottom: 100px;
        width: 100%;
        height: auto;
        user-select: none;
    }

    .jum-btm {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: white;

        .mouse {
            color: var(--c-text-3);
            transition: 0.3s;

            &:hover {
                color: var(--c-text-1);
                cursor: pointer;
            }
        }
    }

}

@keyframes scaleDraw {

    /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
    0% {
        transform: scale(1);
        /*开始为原始大小*/
    }

    50% {
        transform: scale(1.1);
    }
}
</style>
